<script setup>
import { ref,onMounted } from 'vue'
import { queryLogisticsCompany,addLogisticsCompanyApi,queryLogisticsCompanyById,updateLogisticsCompany,deleteLogisticsCompany } from '../../api/logisticscompany'
import { ElMessage } from 'element-plus'

//定义弹出框数据
const title = ref(null)
const dialogShow = ref(false)
const dialogData = ref({companyName:'',minPrice:'',linkUser:'',linkePhone:''})

//定义表单数据
const logisticsCompanyDate = ref({companyName:'',linkUser:''})

//定义分页的变量
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
//定义分页的点击事件
const handleSizeChange = (val) => {
  page.value = 1
  query()
}
const handleCurrentChange = (val) => {
  query()
}
//定义清空表单的点击事件
const clear = () => { 
  logisticsCompanyDate.value = {companyName:'',linkUser:''}
  query()
}

//定义table的变量
const logisticsCompanyList = ref([])
//定义查询的点击事件
const query = async () => { 
  const result = await queryLogisticsCompany(page.value,pageSize.value,logisticsCompanyDate.value.companyName,logisticsCompanyDate.value.linkUser)
  logisticsCompanyList.value = result.data.rows
  total.value = result.data.total
}
//挂载
onMounted(() => {
  query()
})

//添加的点击事件
const saveLogisticsCompany = () => { 
  title.value = '添加物流公司'
  dialogShow.value = true
  // 清空表单数据
  dialogData.value = {companyName:'',minPrice:'',linkUser:'',linkePhone:''}
    // 清空表单校验
  if(ruleFormRef.value){
    ruleFormRef.value.resetFields()
  }
}

//保存的点击事件
const savelogisticsCompanyInfo = async () => { 
  let result = null
  if(dialogData.value.id){
    //修改
    result = await updateLogisticsCompany(dialogData.value)
  }else{
    //添加
    result = await addLogisticsCompanyApi(dialogData.value)
  }
  if(result.code){
    ElMessage.success('操作成功！')
    dialogShow.value = false
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}

//回显查询数据
const edit = async (id)=>{
  title.value = '修改物流公司'
  dialogShow.value = true
  const result = await queryLogisticsCompanyById(id) 
  dialogData.value = result.data
}

//删除
const deleteById = async (id)=>{
  const result = await deleteLogisticsCompany(id) 
  if(result.code){
    ElMessage.success('操作成功！')
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}

//定义表单引用的ref
const ruleFormRef = ref(null)
// 验证规则
const rules = ref({
  minPrice: [
    { required: true, message: '请输入物流运输最低费用', trigger: 'blur' },
    { min: 2, max: 50, message: '长度应在2到50个字符之间', trigger: 'blur' }
  ],
  linkUser: [
    { required: true, message: '请输入联系人', trigger: 'blur' },
    { min: 2, max: 20, message: '长度应在2到20个字符之间', trigger: 'blur' }
  ],
  linkePhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
});
</script>
<template>
<div><h4>物流公司管理</h4></div>
<div>
  <el-form :inline="true" :model="logisticsCompanyDate" class="demo-form-inline">
    <el-form-item>
      <el-button type="primary" @click="saveLogisticsCompany"><el-icon><Plus /></el-icon></el-button>
    </el-form-item>
    <el-form-item>
      <el-input v-model="logisticsCompanyDate.companyName" placeholder="物流公司名称" />
    </el-form-item>
    <el-form-item>
      <el-input v-model="logisticsCompanyDate.linkUser" placeholder="联系人" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
      <el-button type="default" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
</div>

<!-- table表格 -->
<div>
  <el-table :data="logisticsCompanyList" border style="width: 100%" >
    <el-table-column fixed type="index" label="序号" align="center"  width="80"/>
    <el-table-column prop="companyName" label="物流公司名称" align="center"  width="200"/>
    <el-table-column prop="minPrice" label="物流运输最低费用" align="center" width="200"/>
    <el-table-column prop="linkUser" label="联系人" align="center" width="200"/>
    <el-table-column prop="linkePhone" label="联系电话" align="center" width="200"/>
    <el-table-column prop="createTime" label="创建时间" align="center" width="200"/>
    <el-table-column fixed="right" label="操作" align="center" width="120">
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon></el-button>
        <el-button type="danger" size="small" @click="deleteById(scope.row.id)"><el-icon><Delete /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

<!-- 分页 -->
<div>
  <el-pagination
  v-model:current-page="page"
  v-model:page-size="pageSize"
  :page-sizes="[5, 10, 15, 20]"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"/>
</div>

<!-- 弹出框 -->
<div>
  <el-dialog v-model="dialogShow" :title="title" width="500" align-center>
    <el-form :model="dialogData" :rules="rules" ref="ruleFormRef">
      <el-form-item label="物流公司名称">
        <el-input v-model="dialogData.companyName" placeholder="物流公司名字" />
      </el-form-item>
      <el-form-item label="最低费用" prop="minPrice">
        <el-input v-model="dialogData.minPrice" placeholder="物流运输最低费用"/>
      </el-form-item>
      <el-form-item label="联系人" prop="linkUser">
        <el-input v-model="dialogData.linkUser" placeholder="联系人"/>
      </el-form-item>
      <el-form-item label="联系电话" prop="linkePhone">
        <el-input v-model="dialogData.linkePhone" placeholder="联系电话" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogShow = false" type="default">取消</el-button>
      <el-button type="primary" @click="savelogisticsCompanyInfo">确定</el-button>
    </template>
  </el-dialog>
</div>
</template>
<style scoped>
</style>